/* eslint-disable react/prop-types */
import { Button, Flex, Form, Input, Modal } from "antd"
import { useState } from "react"

import { useLocale } from "@/locales"

interface IVerifyModalProps {
	handleChangeInputVerify: (value: string) => void
	handleCancelVerify: () => void
	isModalVerify: boolean
}
export const VerifyModal: React.FC<IVerifyModalProps> = ({ handleChangeInputVerify, handleCancelVerify, isModalVerify }) => {
	const [form] = Form.useForm()
	const [value, setValue] = useState("")
	const { formatMessage } = useLocale()
	const submit = (values: any) => {
		handleChangeInputVerify(values.googleKey)
		form.resetFields()
	}
	return (
		<Modal footer={null} centered title={null} onCancel={handleCancelVerify} open={isModalVerify}>
			<Form form={form} onFinish={submit}>
				<Form.Item>
					<Form.Item
						style={{ marginTop: "20px" }}
						name="googleKey"
						label={formatMessage({ id: "common.google_key" })}
						rules={[{ required: true, message: formatMessage({ id: "common.please_enter_google_key" }) }]}
					>
						<Input
							value={value}
							onChange={e => setValue(e.target.value)}
							placeholder={formatMessage({ id: "common.please_enter_google_key" })}
							allowClear
						/>
					</Form.Item>

					<Flex justify="center" gap={10} className="marginTop">
						<Button htmlType="button" onClick={() => handleCancelVerify()}>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button type="primary" htmlType="submit">
							{formatMessage({ id: "member.table_info.confirm" })}
						</Button>
					</Flex>
				</Form.Item>
			</Form>
		</Modal>
	)
}
